<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Display</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />

        <!--
        <style>
            body * {border:1px solid black;
            }
        </style>
        -->
    </head>

    <body>
        <h1>Display</h1>
        <code>display:inline</code>
        <p>p #1</p>
        <p>p #2</p>
        <p>p #3</p>

        <!-- <ol> is a structural block element and by default is displayed with a linebreak at
            the end of the block; we can override that in stylesheet using display:inline -->
        <!--
           OBSERVATIONS: <li> occupy the entire text area, unlike <td> which only takes up as much space as the longest text in the column
          -->
        <ol>
            <li>li #1</li>
            <li>li #2</li>
            <li>li #3</li>
        </ol>

        <table>
            <tr>
                <td>td-00</td>
                <td>td-01</td>
            </tr>
            <tr>
                <td>td-10</td>
                <td>td-11</td>
            </tr>
        </table> 

        <strong>strong displayed as<br /><code>display:inline-block</code></strong><p>blah</p>
        <br />
        <hr />

        <em>em #1 as <code>display:block</code></em> <em>em #2</em>
        <hr />

        <div class="as_ul">
            <dfn>dfn as <code>display:list-item</code></dfn>
            <dfn>dfn</dfn>
            <p>let me hear you....</p>
            <dfn>dfn as <code>display:list-item</code></dfn>
            <dfn>dfn</dfn>
        </div>

        <p>The following two blocks are identical, if you disable all link'ed in style for this page, which muck around
           with the display property for testing purpose. See my Google Notes, 'HTML/CSS Notes' </p>
        <span style="display:block; padding-left:40px">
            <span style="display:list-item; list-style-type:decimal;">span as <code>display:list-item</code></span>
            <span style="display:list-item; list-style-type:decimal;">span</span>
        </span>
        <ol>
            <li>li as <code>display:list-item</code></li>
            <li>li</li>
        </ol>

        <hr />

        <img src="star.gif" alt="star" /><code>&lt;img&gt; as display:none</code>

        <!-- The following code DOES work in Internet Explorer 8 and newer versions -->
        <div class="as_table">div as <code>display:table</code></div>
        <div class="as_row"  >div as <code>display:table-row</code></div>
        <div class="as_cell" >div as <code>display:table-cell</code></div>
        <hr />

        <span class="as_inline_table">
            <span class="as_row">
                <span class="as_cell">span cell</span>
                <span class="as_cell">span cell <code>display:inline_table</code></span>
            </span>
            <span class="as_row">
                <span class="as_cell">span</span>
                <span class="as_cell">span</span>
            </span>
        </span> 
        <p>Since the previous &lt;span&gt; is displayed as <code>inline_table</code>the words here
           should follow after the table without a break.</p>

        <hr />
        <div class="as_table">
            <div class="as_row">
                <div class="as_cell">div</div>
                <div class="as_cell">div as <code>display:table</code></div>
            </div>
            <div class="as_row">
                <div class="as_cell">div</div>
                <div class="as_cell">div</div>
            </div>
        </div> 
        <p>Since the previous <code>&lt;div&gt;</code> is displayed as <code>table</code> the words here
        should follow the table on a new break/line; even if <code>&lt;p&gt;</code> is styled as <code>display:inline</code>.</p>
        <p>YEA!!! I understand <code>display</code> completely now!</p>
    </body>
</html>
